<template>
  <div class="min-h-screen py-8 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
      <!-- 页面标题 -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold mb-4 tech-text">File API</h1>
        <p class="text-gray-300 text-lg">
          文件读取、处理和上传功能，支持拖拽上传和多种文件预览
        </p>
      </div>

      <!-- 文件上传 -->
      <div class="tech-card mb-8">
        <h2 class="text-2xl font-semibold mb-6 text-white">文件上传</h2>
        
        <div
          @drop="handleDrop"
          @dragover.prevent
          @dragenter="isDragging = true"
          @dragleave="isDragging = false"
          :class="[
            'border-2 border-dashed rounded-lg p-8 text-center transition-all cursor-pointer',
            isDragging ? 'border-tech-accent bg-tech-accent/10' : 'border-gray-600 hover:border-tech-accent'
          ]"
        >
          <i class="i-carbon-cloud-upload text-6xl text-gray-400 mb-4 block mx-auto"></i>
          <p class="text-gray-300 mb-2 text-lg">拖拽文件到这里或点击选择文件</p>
          <p class="text-gray-500 text-sm mb-4">支持多文件上传，支持图片、文档、音频、视频等</p>
          <input
            ref="fileInputRef"
            type="file"
            multiple
            @change="handleFileSelect"
            class="hidden"
          >
          <button
            @click="fileInput?.click()"
            class="tech-button mt-4"
          >
            <i class="i-carbon-document-add mr-2"></i>
            选择文件
          </button>
        </div>

        <!-- 上传统计 -->
        <div v-if="files.length > 0" class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">
          <div class="bg-gray-800 rounded-lg p-4 text-center">
            <div class="text-3xl font-bold text-blue-400">{{ files.length }}</div>
            <div class="text-gray-400 text-sm">文件总数</div>
          </div>
          <div class="bg-gray-800 rounded-lg p-4 text-center">
            <div class="text-3xl font-bold text-green-400">{{ formatFileSize(totalSize) }}</div>
            <div class="text-gray-400 text-sm">总大小</div>
          </div>
          <div class="bg-gray-800 rounded-lg p-4 text-center">
            <div class="text-3xl font-bold text-purple-400">{{ imageFiles.length }}</div>
            <div class="text-gray-400 text-sm">图片文件</div>
          </div>
          <div class="bg-gray-800 rounded-lg p-4 text-center">
            <div class="text-3xl font-bold text-yellow-400">{{ textFiles.length }}</div>
            <div class="text-gray-400 text-sm">文本文件</div>
          </div>
        </div>
      </div>

      <!-- 文件列表 -->
      <div v-if="files.length > 0" class="tech-card mb-8">
        <div class="flex items-center justify-between mb-6">
          <h2 class="text-2xl font-semibold text-white">文件列表</h2>
          <div class="flex gap-2">
            <button
              @click="readAllFiles"
              class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded transition-colors"
            >
              <i class="i-carbon-document-view mr-2"></i>
              全部读取
            </button>
            <button
              @click="clearAllFiles"
              class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded transition-colors"
            >
              <i class="i-carbon-trash-can mr-2"></i>
              全部清空
            </button>
          </div>
        </div>
        
        <div class="space-y-3">
          <div
            v-for="(file, index) in files"
            :key="index"
            class="bg-gray-800 rounded-lg p-4 hover:bg-gray-750 transition-colors"
          >
            <div class="flex items-start gap-4">
              <!-- 文件图标/预览 -->
              <div class="flex-shrink-0">
                <div v-if="file.preview" class="w-24 h-24 rounded overflow-hidden">
                  <img
                    v-if="file.type.startsWith('image/')"
                    :src="file.preview"
                    :alt="file.name"
                    class="w-full h-full object-cover"
                  >
                  <video
                    v-else-if="file.type.startsWith('video/')"
                    :src="file.preview"
                    class="w-full h-full object-cover"
                  ></video>
                  <audio
                    v-else-if="file.type.startsWith('audio/')"
                    :src="file.preview"
                    controls
                    class="w-24"
                  ></audio>
                </div>
                <div v-else class="w-24 h-24 rounded bg-gray-900 flex items-center justify-center">
                  <i :class="getFileIcon(file.type)" class="text-4xl text-gray-500"></i>
                </div>
              </div>

              <!-- 文件信息 -->
              <div class="flex-1 min-w-0">
                <h4 class="text-white font-medium truncate">{{ file.name }}</h4>
                <div class="flex flex-wrap gap-3 mt-2 text-sm text-gray-400">
                  <span>
                    <i class="i-carbon-document mr-1"></i>
                    {{ file.type || '未知类型' }}
                  </span>
                  <span>
                    <i class="i-carbon-data-base mr-1"></i>
                    {{ formatFileSize(file.size) }}
                  </span>
                  <span v-if="file.lastModified">
                    <i class="i-carbon-time mr-1"></i>
                    {{ formatDate(file.lastModified) }}
                  </span>
                </div>

                <!-- 文本内容预览 -->
                <div v-if="file.textContent" class="mt-3 p-3 bg-gray-900 rounded text-xs font-mono max-h-32 overflow-auto">
                  <pre class="text-gray-300 whitespace-pre-wrap">{{ file.textContent.substring(0, 500) }}{{ file.textContent.length > 500 ? '...' : '' }}</pre>
                </div>

                <!-- JSON 内容预览 -->
                <div v-if="file.jsonContent" class="mt-3 p-3 bg-gray-900 rounded text-xs font-mono max-h-32 overflow-auto">
                  <pre class="text-green-400">{{ JSON.stringify(file.jsonContent, null, 2).substring(0, 500) }}</pre>
                </div>
              </div>

              <!-- 操作按钮 -->
              <div class="flex-shrink-0 flex flex-col gap-2">
                <button
                  v-if="!file.preview && !file.textContent && !file.jsonContent"
                  @click="readFile(file, index)"
                  class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded text-sm transition-colors whitespace-nowrap"
                >
                  <i class="i-carbon-view mr-1"></i>
                  读取
                </button>
                <button
                  @click="downloadFile(file)"
                  class="bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded text-sm transition-colors whitespace-nowrap"
                >
                  <i class="i-carbon-download mr-1"></i>
                  下载
                </button>
                <button
                  @click="removeFile(index)"
                  class="bg-red-600 hover:bg-red-700 text-white px-3 py-2 rounded text-sm transition-colors whitespace-nowrap"
                >
                  <i class="i-carbon-close mr-1"></i>
                  删除
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- FileReader 方法演示 -->
      <div class="tech-card mb-8">
        <h2 class="text-2xl font-semibold mb-6 text-white">FileReader 方法演示</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <div class="bg-gray-800 rounded-lg p-6">
            <div class="flex items-center mb-3">
              <i class="i-carbon-document-blank text-2xl text-blue-400 mr-3"></i>
              <h3 class="text-white font-semibold">readAsText</h3>
            </div>
            <p class="text-gray-400 text-sm mb-3">读取文件为文本字符串</p>
            <input
              type="file"
              @change="demonstrateReadAsText"
              accept=".txt,.json,.xml,.html,.css,.js"
              class="text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:bg-tech-accent file:text-white hover:file:bg-tech-accent/80 file:cursor-pointer"
            >
            <div v-if="readAsTextResult" class="mt-3 p-2 bg-gray-900 rounded text-xs font-mono max-h-20 overflow-auto">
              <pre class="text-gray-300">{{ readAsTextResult }}</pre>
            </div>
          </div>

          <div class="bg-gray-800 rounded-lg p-6">
            <div class="flex items-center mb-3">
              <i class="i-carbon-image text-2xl text-green-400 mr-3"></i>
              <h3 class="text-white font-semibold">readAsDataURL</h3>
            </div>
            <p class="text-gray-400 text-sm mb-3">读取为 Base64 编码</p>
            <input
              type="file"
              @change="demonstrateReadAsDataURL"
              accept="image/*"
              class="text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:bg-tech-accent file:text-white hover:file:bg-tech-accent/80 file:cursor-pointer"
            >
            <div v-if="readAsDataURLResult" class="mt-3">
              <img :src="readAsDataURLResult" alt="Preview" class="w-full h-20 object-cover rounded">
            </div>
          </div>

          <div class="bg-gray-800 rounded-lg p-6">
            <div class="flex items-center mb-3">
              <i class="i-carbon-data-base text-2xl text-purple-400 mr-3"></i>
              <h3 class="text-white font-semibold">readAsArrayBuffer</h3>
            </div>
            <p class="text-gray-400 text-sm mb-3">读取为二进制数组</p>
            <input
              type="file"
              @change="demonstrateReadAsArrayBuffer"
              class="text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:bg-tech-accent file:text-white hover:file:bg-tech-accent/80 file:cursor-pointer"
            >
            <div v-if="readAsArrayBufferResult" class="mt-3 text-gray-300 text-xs">
              <div>大小: {{ readAsArrayBufferResult.byteLength }} 字节</div>
              <div>前16字节: {{ readAsArrayBufferResult.preview }}</div>
            </div>
          </div>

          <div class="bg-gray-800 rounded-lg p-6">
            <div class="flex items-center mb-3">
              <i class="i-carbon-binary text-2xl text-yellow-400 mr-3"></i>
              <h3 class="text-white font-semibold">readAsBinaryString</h3>
            </div>
            <p class="text-gray-400 text-sm mb-3">读取为二进制字符串</p>
            <input
              type="file"
              @change="demonstrateReadAsBinaryString"
              class="text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:bg-tech-accent file:text-white hover:file:bg-tech-accent/80 file:cursor-pointer"
            >
            <div v-if="readAsBinaryStringResult" class="mt-3 text-gray-300 text-xs">
              长度: {{ readAsBinaryStringResult.length }} 字节
            </div>
          </div>
        </div>
      </div>

      <!-- Blob 操作 -->
      <div class="tech-card mb-8">
        <h2 class="text-2xl font-semibold mb-6 text-white">Blob 操作</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="bg-gray-800 rounded-lg p-6">
            <h3 class="text-white font-semibold mb-4">创建 Blob</h3>
            <textarea
              v-model="blobText"
              placeholder="输入文本内容..."
              class="w-full bg-gray-900 text-white px-4 py-3 rounded border border-gray-700 focus:border-tech-accent outline-none mb-3"
              rows="4"
            ></textarea>
            <div class="flex gap-2">
              <button
                @click="createTextBlob"
                class="tech-button flex-1"
              >
                创建文本 Blob
              </button>
              <button
                @click="createJsonBlob"
                class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded transition-colors flex-1"
              >
                创建 JSON Blob
              </button>
            </div>
            <div v-if="createdBlob" class="mt-4 text-gray-300 text-sm">
              <div>类型: {{ createdBlob.type }}</div>
              <div>大小: {{ formatFileSize(createdBlob.size) }}</div>
            </div>
          </div>

          <div class="bg-gray-800 rounded-lg p-6">
            <h3 class="text-white font-semibold mb-4">Blob 切片</h3>
            <input
              type="file"
              @change="loadFileForSlicing"
              class="mb-3 text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:bg-tech-accent file:text-white hover:file:bg-tech-accent/80 file:cursor-pointer"
            >
            <div v-if="slicingFile" class="space-y-3">
              <div class="text-gray-300 text-sm">
                文件大小: {{ formatFileSize(slicingFile.size) }}
              </div>
              <div class="flex gap-2">
                <input
                  v-model.number="sliceStart"
                  type="number"
                  placeholder="开始位置"
                  class="flex-1 bg-gray-900 text-white px-3 py-2 rounded border border-gray-700 focus:border-tech-accent outline-none"
                >
                <input
                  v-model.number="sliceEnd"
                  type="number"
                  placeholder="结束位置"
                  class="flex-1 bg-gray-900 text-white px-3 py-2 rounded border border-gray-700 focus:border-tech-accent outline-none"
                >
              </div>
              <button
                @click="sliceBlob"
                class="tech-button w-full"
              >
                切片
              </button>
              <div v-if="slicedContent" class="p-3 bg-gray-900 rounded text-xs font-mono max-h-32 overflow-auto">
                <pre class="text-gray-300">{{ slicedContent }}</pre>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- API 信息 -->
      <div class="tech-card">
        <h3 class="text-xl font-semibold mb-4 text-white">API 信息</h3>
        <div class="space-y-4 text-gray-300">
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">核心 API</h4>
            <ul class="list-disc list-inside space-y-1">
              <li><code class="bg-gray-800 px-2 py-1 rounded">File</code> - 文件对象，继承自 Blob</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">FileReader</code> - 异步读取文件内容</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">Blob</code> - 不可变的原始数据对象</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">FileList</code> - File 对象的列表</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">URL.createObjectURL()</code> - 创建 Blob URL</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">FileReader 方法</h4>
            <ul class="list-disc list-inside space-y-1">
              <li><code class="bg-gray-800 px-2 py-1 rounded">readAsText()</code> - 读取为文本字符串</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">readAsDataURL()</code> - 读取为 Base64 Data URL</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">readAsArrayBuffer()</code> - 读取为 ArrayBuffer</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">readAsBinaryString()</code> - 读取为二进制字符串</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">abort()</code> - 中止读取操作</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">使用场景</h4>
            <ul class="list-disc list-inside space-y-1">
              <li>文件上传和预览（图片、视频、音频）</li>
              <li>拖拽上传</li>
              <li>图片编辑器</li>
              <li>文档阅读器（PDF、Word）</li>
              <li>数据导入（CSV、Excel）</li>
              <li>文件分片上传（大文件）</li>
              <li>前端文件处理和转换</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">最佳实践</h4>
            <ul class="list-disc list-inside space-y-1 text-sm">
              <li>检查文件类型和大小，防止恶意文件</li>
              <li>使用 URL.revokeObjectURL() 释放内存</li>
              <li>大文件使用分片读取</li>
              <li>处理读取错误和进度事件</li>
              <li>避免同步阻塞操作</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, useTemplateRef } from 'vue'

interface FileItem {
  name: string
  size: number
  type: string
  lastModified: number
  file: File
  preview?: string
  textContent?: string
  jsonContent?: any
}

// 文件上传
const fileInput = useTemplateRef<HTMLInputElement>('fileInputRef')
const files = ref<FileItem[]>([])
const isDragging = ref(false)

// FileReader 演示
const readAsTextResult = ref('')
const readAsDataURLResult = ref('')
const readAsArrayBufferResult = ref<{ byteLength: number; preview: string } | null>(null)
const readAsBinaryStringResult = ref('')

// Blob 操作
const blobText = ref('')
const createdBlob = ref<Blob | null>(null)
const slicingFile = ref<File | null>(null)
const sliceStart = ref(0)
const sliceEnd = ref(100)
const slicedContent = ref('')

// 计算属性
const totalSize = computed(() => {
  return files.value.reduce((sum, file) => sum + file.size, 0)
})

const imageFiles = computed(() => {
  return files.value.filter(file => file.type.startsWith('image/'))
})

const textFiles = computed(() => {
  return files.value.filter(file => 
    file.type.startsWith('text/') || 
    file.name.endsWith('.txt') || 
    file.name.endsWith('.json') ||
    file.name.endsWith('.xml')
  )
})

// === 文件上传 ===

const handleFileSelect = (event: Event) => {
  const target = event.target as HTMLInputElement
  if (target.files) {
    addFiles(Array.from(target.files))
  }
}

const handleDrop = (event: DragEvent) => {
  event.preventDefault()
  isDragging.value = false
  if (event.dataTransfer?.files) {
    addFiles(Array.from(event.dataTransfer.files))
  }
}

const addFiles = (newFiles: File[]) => {
  newFiles.forEach(file => {
    const fileItem: FileItem = {
      name: file.name,
      size: file.size,
      type: file.type,
      lastModified: file.lastModified,
      file
    }
    
    // 自动预览图片、视频、音频
    if (file.type.startsWith('image/') || file.type.startsWith('video/') || file.type.startsWith('audio/')) {
      const reader = new FileReader()
      reader.onload = (e) => {
        fileItem.preview = e.target?.result as string
      }
      reader.readAsDataURL(file)
    }
    
    files.value.push(fileItem)
  })
}

const readFile = (fileItem: FileItem, index: number) => {
  const reader = new FileReader()
  
  reader.onload = (e) => {
    const result = e.target?.result
    
    // 文本文件
    if (fileItem.type.startsWith('text/') || 
        fileItem.name.endsWith('.txt') || 
        fileItem.name.endsWith('.json') ||
        fileItem.name.endsWith('.xml') ||
        fileItem.name.endsWith('.html') ||
        fileItem.name.endsWith('.css') ||
        fileItem.name.endsWith('.js')) {
      files.value[index].textContent = result as string
      
      // JSON 特殊处理
      if (fileItem.name.endsWith('.json')) {
        try {
          files.value[index].jsonContent = JSON.parse(result as string)
        } catch (error) {
          console.error('JSON parse error:', error)
        }
      }
    }
    // 其他文件类型显示 Data URL
    else if (!fileItem.preview) {
      files.value[index].preview = result as string
    }
  }
  
  // 根据文件类型选择读取方式
  if (fileItem.type.startsWith('text/') || 
      fileItem.name.endsWith('.txt') || 
      fileItem.name.endsWith('.json') ||
      fileItem.name.endsWith('.xml') ||
      fileItem.name.endsWith('.html') ||
      fileItem.name.endsWith('.css') ||
      fileItem.name.endsWith('.js')) {
    reader.readAsText(fileItem.file)
  } else {
    reader.readAsDataURL(fileItem.file)
  }
}

const readAllFiles = () => {
  files.value.forEach((file, index) => {
    if (!file.preview && !file.textContent) {
      readFile(file, index)
    }
  })
}

const downloadFile = (fileItem: FileItem) => {
  const url = URL.createObjectURL(fileItem.file)
  const link = document.createElement('a')
  link.href = url
  link.download = fileItem.name
  link.click()
  URL.revokeObjectURL(url)
}

const removeFile = (index: number) => {
  files.value.splice(index, 1)
}

const clearAllFiles = () => {
  files.value = []
}

// === FileReader 方法演示 ===

const demonstrateReadAsText = (event: Event) => {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  if (!file) return
  
  const reader = new FileReader()
  reader.onload = (e) => {
    readAsTextResult.value = (e.target?.result as string).substring(0, 200)
  }
  reader.readAsText(file)
}

const demonstrateReadAsDataURL = (event: Event) => {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  if (!file) return
  
  const reader = new FileReader()
  reader.onload = (e) => {
    readAsDataURLResult.value = e.target?.result as string
  }
  reader.readAsDataURL(file)
}

const demonstrateReadAsArrayBuffer = (event: Event) => {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  if (!file) return
  
  const reader = new FileReader()
  reader.onload = (e) => {
    const buffer = e.target?.result as ArrayBuffer
    const bytes = new Uint8Array(buffer)
    const preview = Array.from(bytes.slice(0, 16))
      .map(b => b.toString(16).padStart(2, '0'))
      .join(' ')
    
    readAsArrayBufferResult.value = {
      byteLength: buffer.byteLength,
      preview
    }
  }
  reader.readAsArrayBuffer(file)
}

const demonstrateReadAsBinaryString = (event: Event) => {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  if (!file) return
  
  const reader = new FileReader()
  reader.onload = (e) => {
    readAsBinaryStringResult.value = e.target?.result as string
  }
  reader.readAsBinaryString(file)
}

// === Blob 操作 ===

const createTextBlob = () => {
  if (!blobText.value) return
  
  createdBlob.value = new Blob([blobText.value], { type: 'text/plain' })
  
  // 自动下载
  const url = URL.createObjectURL(createdBlob.value)
  const link = document.createElement('a')
  link.href = url
  link.download = 'text-blob.txt'
  link.click()
  URL.revokeObjectURL(url)
}

const createJsonBlob = () => {
  if (!blobText.value) return
  
  try {
    const jsonObj = { message: blobText.value, timestamp: Date.now() }
    createdBlob.value = new Blob([JSON.stringify(jsonObj, null, 2)], { type: 'application/json' })
    
    // 自动下载
    const url = URL.createObjectURL(createdBlob.value)
    const link = document.createElement('a')
    link.href = url
    link.download = 'data.json'
    link.click()
    URL.revokeObjectURL(url)
  } catch (error) {
    console.error('JSON creation error:', error)
  }
}

const loadFileForSlicing = (event: Event) => {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  if (!file) return
  
  slicingFile.value = file
  sliceStart.value = 0
  sliceEnd.value = Math.min(100, file.size)
  slicedContent.value = ''
}

const sliceBlob = () => {
  if (!slicingFile.value) return
  
  const start = Math.max(0, sliceStart.value)
  const end = Math.min(slicingFile.value.size, sliceEnd.value)
  
  const slice = slicingFile.value.slice(start, end)
  
  const reader = new FileReader()
  reader.onload = (e) => {
    slicedContent.value = e.target?.result as string
  }
  reader.readAsText(slice)
}

// === 工具函数 ===

const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const formatDate = (timestamp: number): string => {
  return new Date(timestamp).toLocaleString('zh-CN')
}

const getFileIcon = (type: string): string => {
  if (type.startsWith('image/')) return 'i-carbon-image'
  if (type.startsWith('video/')) return 'i-carbon-video'
  if (type.startsWith('audio/')) return 'i-carbon-music'
  if (type.startsWith('text/')) return 'i-carbon-document-blank'
  if (type.includes('pdf')) return 'i-carbon-document-pdf'
  if (type.includes('zip') || type.includes('rar')) return 'i-carbon-archive'
  if (type.includes('json')) return 'i-carbon-json'
  if (type.includes('xml')) return 'i-carbon-code'
  return 'i-carbon-document'
}
</script>

<style scoped>
input[type="file"]::-webkit-file-upload-button {
  cursor: pointer;
}
</style>
